<template>
  <div class="environment-list">
    <el-row>
      <el-table border :data="envs" style="width: 100%;">
        <el-table-column prop="name" label="名称" width="150" />
        <el-table-column prop="value" label="值" />
        <el-table-column prop="description" label="变量说明" width="250" />
        <el-table-column v-if="checkPer(['admin','dpEnvVariables:edit','dpEnvVariables:del'])" label="操作" width="250" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="openDialogToUpdate(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="toDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <div class="button-group">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="openDialogToAdd">
          添加环境变量
        </el-button>
      </div>
    </el-row>
    <!--表单组件-->
    <el-dialog :close-on-click-modal="false" :visible.sync="showDialog" title="新增环境变量" width="500px">
      <el-form ref="form" :model="form" size="small" label-width="80px">
        <el-form-item label="变量名称" prop="name">
          <el-input v-model="form.name" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="变量的值" prop="value">
          <el-input v-model="form.value" :rows="8" type="textarea" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="变量说明" prop="description">
          <el-input v-model="form.description" :rows="2" type="textarea" style="width: 370px;" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="closeDialog">取消</el-button>
        <el-button @click="addData">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import crudDpEnvVariables, { getEnvAll, del as delEnv } from '@/api/deploy/dpEnvVariables'

export default {
  name: 'EnvStageComponent',
  components: { },

  props: {
    projectId: {
      type: Number,
      default: () => { return -1 }
    }
  },
  data() {
    return {
      showDialog: false,
      envs: [],
      permission: {
        add: ['admin', 'dpEnvVariables:add'],
        edit: ['admin', 'dpEnvVariables:edit'],
        del: ['admin', 'dpEnvVariables:del']
      },
      form: { projectId: this.projectId, env: this.env, scope: 1 }
    }
  },
  computed: {
    ...mapGetters([
      'env'
    ])
  },
  created() {
    // 监听应用下拉框选择事件
    this.$bus.$on('global-env-change', this.refreshData)
  },
  mounted() {
    this.refreshData()
  },
  methods: {
    async toDelete(data) {
      await delEnv([data.id])
      await this.refreshData()
    },
    openDialogToAdd() {
      this.showDialog = true
      this.form = { projectId: this.projectId, env: this.env, scope: 1 }
    },
    openDialogToUpdate(row) {
      this.showDialog = true
      this.form = { projectId: this.projectId, env: this.env, scope: 1, id: row.id, name: row.name, value: row.value, description: row.description }
    },
    closeDialog() {
      this.showDialog = false
    },
    async addData() {
      await crudDpEnvVariables.add(this.form)
      await this.refreshData()
      await this.closeDialog()
    },
    refreshData() {
      const para = {}
      para.projectId = this.projectId
      para.env = this.env
      getEnvAll(para).then(data => {
        this.envs = data
      }).catch(err => {
        this.$notify({
          title: '获取环境变量失败' + err,
          type: 'error',
          duration: 2500
        })
      })
    }
  }
}

</script>

<style lang="scss" scoped>
  .button-group {
    width: 100%;
    text-align: left;
    margin-top: 15px;
    margin-bottom: 25px;
    margin-left: 12px;
  }

  .el-table {
    min-height: 360px;
  }
</style>
